<template>
	<view class="content">
		<uni-popup :show="type === 'gx'" position="middle" mode="fixed" style="position: fixed;z-index: 99999;">

			<view class="bra30" style="background: #fff;width: 650upx;height: 490upx;position: relative;border-radius: 40upx;font-size: 30upx;color: #666;">
				<view class="fdc aic jc-center">
					<circle-percent bg="#1D84E8" :percent="tttt" class="mg-t-20"></circle-percent>
					<view class="mg-t-30 weight">正在下载,请勿离开页面...</view>
				</view>
			</view>
		</uni-popup>
		<!-- 版本更新提示 -->
		<uni-popup :show="type === 'gengxin'" position="middle" mode="fixed" style="position: fixed;z-index: 99999;">

			<view class="bra30" style="background: #fff;width: 650upx;height: 490upx;position: relative;border-radius: 40upx;">
				<view class="w100pc" style="position: absolute;bottom: -100upx;left: 0;">
				</view>
				<view class="mg-r-30 lrpadd-40">
					<view class="" style="text-align: center;padding-top: 30upx;font-size: 32upx;">提示更新</view>
					<scroll-view scroll-y style="height: 200upx;margin-top: 60upx;margin-left: 40upx;">
						<view class="fdc">
							<view class="f28" style="margin-bottom: 30upx;" v-for="(item,index) in gengxing" :key="index">{{item}}</view>
						</view>
					</scroll-view>
					<view class="fcc" style="padding: 30upx 0 10upx 20upx;">
						<view class="f32" style="background: #1D84E8;width: 200upx;color: #FFFFFF;height: 70upx;line-height: 70upx;border-radius: 60upx;text-align: center;"
						 @click="weishi()">
							更新
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<view class="serchbox">
			<view class="mp-search-box" @click="gopage(9)">
				<image src="../../static/logo.png" style="width: 130upx;height: 26upx;align-items: center;"></image>
				<input class="ser-input" type="text" placeholder="输入关键字搜索" disabled />
				<image src="../../static/ind-1.png" style="width: 32upx;height: 34upx;"></image>
			</view>
		</view>

		<view style="padding-top: 170upx;">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-active-color="#FFFFFF"
			 indicator-color='#E0E0E0'>
				<swiper-item v-for="(bitem,bkey) in banlist" :key="bkey">
					<view class="swiper-item">
						<image :src="bitem.images_url" style="height: 316upx;width: 100%;"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view style="padding: 38upx 30upx;">
			<view class="titlebox">热门功能</view>
			<view style="margin-top: 20upx;">
				<scroll-view show-scrollbar="true" :scroll-left="scrollLeft" class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
					<view id="demo" class="scroll-view-item_H " >
						<view style="display: flex;justify-content: space-between;margin-bottom:20upx ;">
							<view class="hotbox" @click="gopage(1)">
								<image src="../../static/ind-4.png" style="width:308upx;height: 160upx;"></image>
							</view>
							<view class="hotbox" @click="gopage(2)">
								<image src="../../static/ind-5.png" style="width:308upx;height: 160upx;"></image>
							</view>
						</view>
						<view style="display: flex;justify-content: space-between;">
							<view class="hotbox" @click="gopage(10)">
								<image src="../../static/ind-12.png" style="width:308upx;height: 160upx;"></image>
							</view>
							
							<view class="hotbox" @click="gopage(4)">
								<image src="../../static/ind-7.png" style="width:308upx;height: 160upx;"></image>
							</view>
						</view>
					</view>
					<view id="demo1" class="scroll-view-item_H" style="margin-left: 30upx;">
						<view style="display: flex;justify-content: space-between;margin-bottom:20upx ;">
							<view class="hotbox" @click="gopage(3)">
								<image src="../../static/ind-6.png" style="width:308upx;height: 160upx;"></image>
							</view>
						</view>
						<view style="display: flex;justify-content: space-between;">
							<view class="hotbox" style="opacity:0;">
								<image src="../../static/ind-4.png" style="width:308upx;height: 160upx;"></image>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- <view style="display: flex;justify-content: space-between;margin-bottom:20upx ;">
					<view class="hotbox" @click="gopage(1)">
						<image src="../../static/ind-4.png" style="width:308upx;height: 160upx;"></image>
					</view>
					<view class="hotbox" @click="gopage(2)">
						<image src="../../static/ind-5.png" style="width:308upx;height: 160upx;"></image>
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;">
					<view class="hotbox" @click="gopage(3)">
						<image src="../../static/ind-6.png" style="width:308upx;height: 160upx;"></image>
					</view>
					<view class="hotbox" @click="gopage(4)">
						<image src="../../static/ind-7.png" style="width:308upx;height: 160upx;"></image>
					</view>
				</view> -->
			</view>
		</view>
		<view style="border-top:4upx solid #f9f9f9;border-bottom:4upx solid #f9f9f9;padding: 38upx 30upx;">
			<view class="titlebox">购物专区</view>
			<view style="display: flex;align-items: center;text-align: center;font-size: 26upx;margin-top:38upx;">
				<view class="flex-1" @click="gopage(8,2)">
					<image src="../../static/ind-11.png" style="width: 82upx;height: 82upx;display: block;margin: 0 auto 16upx;"></image>
					<text>拼团抢</text>
				</view>
				<view class="flex-1" @click="gopage(8,1)">
					<image src="../../static/ind-14.png" style="width: 82upx;height: 82upx;display: block;margin: 0 auto 16upx;"></image>
					<text>油卡区</text>
				</view>
				<view class="flex-1" @click="gopage(6)">
					<image src="../../static/ind-13.png" style="width: 82upx;height: 82upx;display: block;margin: 0 auto 16upx;"></image>
					<text>转让区</text>
				</view>
				<view class="flex-1" @click="gopage(11)">
					<image src="../../static/ind-15.png" style="width: 82upx;height: 82upx;display: block;margin: 0 auto 16upx;"></image>
					<text>加油站</text>
				</view>
				
			</view>
			<view style="display: flex;align-items: center;text-align: center;font-size: 26upx;margin-top:38upx;">
				<view style="width:25%" @click="gopage(7)">
					<image src="../../static/ind-10.png" style="width: 82upx;height: 82upx;display: block;margin: 0 auto 16upx;"></image>
					<text>公益仓</text>
				</view>
				<view style="width:25%" @click="gopage(5)">
					<image src="../../static/ind-8.png" style="width: 82upx;height: 82upx;display: block;margin: 0 auto 16upx;"></image>
					<text>世界风</text>
				</view>
				<view style="width:25%" @click="gopage(5)">
					<image src="../../static/ind-9.png" style="width: 82upx;height: 82upx;display: block;margin: 0 auto 16upx;"></image>
					<text>好家园</text>
				</view>
			</view>
			
		</view>
		<!-- 底部的信息栏 -->
		<view>
			<view style="padding: 38upx 30upx;" v-for="(pitem,pindex) in indexbottom" @click="gopanic(pitem)">
				<view class="titlebox">{{pitem.title}}</view>
				<image :src="pitem.images" style="width: 100%;margin-top: 20upx;" mode="widthFix"></image>
			</view>
		</view>
		
		<!--  -->
	</view>


</template>
<script>
	import postAjax from '../../API/postAjax.js'
	import uniPopup from '../../components/uni-popup/uni-popup.vue'
	import circlePercent from '@/components/circle-percent/circle-percent'
	export default {
		data() {
			return {
				// 快递xinxi
				userToken: '',
				// 轮播图
				banlist: [],
				// 首页底部的信息
				indexbottom:[],
				type: '', //弹窗
				gengxing: [],
				apk_pack:'',
				gx:'',
				tttt:0,
				ver:'',
				reddian:null,//更新红点
				version:'',
				scrollLeft:0,
				old: {
					scrollTop: 0,
					scrollLeft:0
				}
			}
		},
		onShow() {
			let that = this
<<<<<<< HEAD

			that.get_index_bottom()

=======
			that.get_index_bottom()
>>>>>>> 34fd93147620a158e9848ba2c98b372824e1a9f2
		},
		onLoad(options) {
			let that = this
			that.gengxi()
			that.getbanner()
		},
		onHide(){
		},
		components: {
			uniPopup,
			circlePercent
		},
		methods: {
			// 获取轮播图
			getbanner() {
				
				let that = this
				postAjax('index/carousel', {}, function(data) {
					// console.log(data)
					if (data.code == 0) {
						that.banlist = data.data
					} else {
						that.getbanner()
					}

				})
			},
			gopanic(item) {
				let that = this
				let mystatus = item.oil_type=='1'?'899':'894'
				uni.navigateTo({
					url:'../order/detail?type=quickbuy&id='+item.id+'&item='+JSON.stringify(item)+'&mystatus='+mystatus,
					animationDuration:300
				})
			},
			scroll: function(e) {
			},
			// 获取首页底部的信息
			get_index_bottom() {
				let that = this
				postAjax('Panicbuying/panicbuyinglist', {
					is_home_recommended:1,
					status:0,
					type:0
				}, function(data) {
					console.log(data)
					if (data.code == 0) {
						that.indexbottom = data.data
					} else {
						that.get_index_bottom()
					}
				})
			},
			gopage(type, status) {
				let that = this
				//1 抢购设置 2推广中心 3 运营升级 4 文件夹 5 我国际仓 6特产购 7工艺仓 8抢购团 9 搜索页
				if (type == 1) {
					uni.navigateTo({

						url: '../hotfunc/panic',

						animationDuration: 300
					})
				}
				if (type == 2) {
					uni.navigateTo({
						url: '../hotfunc/share',
						animationDuration: 300
					})
				}
				if (type == 3) {
					uni.navigateTo({
						url: '../hotfunc/operate',
						animationDuration: 300
					})
				}
				if (type == 4) {
					// uni.navigateTo({
					// 	url: '../hotfunc/pubfiles',
					// 	animationDuration: 300
					// })
					uni.navigateTo({
						url: '../exchange/files',
						animationDuration: 300
					})
				}
				if (type == 5) {
					uni.showToast({
						title: '此功能暂未开放',
						icon: 'none'
					})
				}
				if (type == 6) {
					uni.navigateTo({
						url: '../hotfunc/transfer',
						animationDuration: 300
					})
				}
				if (type == 7) {
					uni.navigateTo({
						url: '../hotfunc/welfare',
						animationDuration: 300
					})
				}
				if (type == 8) {
					uni.navigateTo({
						url: '../hotfunc/buyteam?status='+status,
						animationDuration: 300
					})
				}
				if (type == 9) {
					uni.navigateTo({
						url: '../hotfunc/hotsearch',

						animationDuration: 300
					})
				}
				if (type == 10) {
					uni.navigateTo({
						url: '../exchange/index',
				
						animationDuration: 300
					})
				}
				if (type == 11) {
					uni.navigateTo({
						url: '../hotfunc/oilstate',
						animationDuration: 300
					})
				}
			},
			gengxi(e) {
				let that = this
				plus.runtime.getProperty(plus.runtime.appid, function(inf) {
					let ver = inf.version
					// console.log(ver)
					that.ver = ver
					// let ver = '1.0.0'
					// that.ver = ver
					uni.getSystemInfo({
						success: function(res) {
							if (res.platform == 'android') {
								postAjax('index/appVersion', '', function(data) {
									// console.log(data)
									if(data.code==0){
										let odata = data.data 
										let a = ver.replace(/[^0-9]/ig, "")
										let version = odata.version_num
										let b = version.replace(/[^0-9]/ig, "")
										uni.setStorageSync("version",version)
										if (Number(a) - Number(b) < 0) {
											uni.hideTabBar()
											that.type = 'gengxin'
											that.gengxing = odata.content.split('\n')
											that.apk_pack = odata.download
											console.log(that.apk_pack)
											that.gx = 1
											that.reddian = true
										}else{
											that.reddian = false
										}
									}
								})
							} 
						}
					});
				});
			},
			weishi() {
				let that = this
				that.type = 'gx'
				// return
				setTimeout(function() {
					const downloadTask = uni.downloadFile({
						url: that.apk_pack,
						success: (res) => {
							console.log(JSON.stringify(res))
							if (res.statusCode === 200) {
								that.install(res.tempFilePath)
							}
						}
					});
					downloadTask.onProgressUpdate((res) => {
						that.tttt =Number(res.progress) 
						// console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite); 
					});
				}, 1000)
			},
			install(path) {
			 let that = this
			 plus.runtime.install(path, {}, function() {
			    
			 }, function(e) {
			     
			 });
			 that.type = ''
			},
		}
	}
</script>

<style>
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
	.scroll-view-item {
		text-align: center;
	}
	.scroll-view-item_H {
		display: inline-block;
		height:180upx;
		width: 100%;
		text-align: center;
	}
	.borderox {
		border-top: 2upx solid #eee
	}

	.content {
		min-height: 100vh;
		position: relative;
	}

	.serchbox {
		background-color: #1D84E8;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 99;
		position: fixed;
	}

	.mp-search-box {
		display: flex;
		align-items: center;
		padding: 90upx 40upx 16upx 24upx;
	}

	.ser-input {
		flex: 1;
		margin: 0 36upx 0 28upx;
		background-color: #fff;
		font-size: 28upx;
		padding: 16upx 20upx;
		border-radius: 20vw;
	}

	.uni-swiper .uni-swiper-dot-active {
		background-color: #F1EB01;
		width: 16px;
		border-radius: 20px;
	}

	.titlebox {
		position: relative;
		font-size: 28upx;
		color: #333;
		padding-left: 22upx;
	}

	.titlebox::before {
		content: '';
		display: block;
		background-color: #1D84E8;
		width: 8upx;
		height: 30upx;
		position: absolute;
		left: 0;
		top: 6upx
	}

	.flex-1 {
		flex: 1
	}
</style>
